<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">学习卡激活</view>
			</view>
		</view>
		<!--#endif-->
		<view class="index-content">
			<view class="tabbar">
				<view v-for="(i,n) in tabList" @tap="change(n)" :class="n==index?'Focus':''">
					{{i}}
				</view>

			</view>
			<view v-if="index==0"  class="FormContainer">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<view class="">
						卡号
					</view>
					<uni-forms-item label="卡号" name="cardid">

						<input type="number" class="input" v-model="formData.cardid" placeholder="请输入学习卡号" />
					</uni-forms-item>
					<view class="">
						密码
					</view>
					<uni-forms-item label="密码" name="password">
						<input class="input" v-model="formData.password" type="number" password
							placeholder="请输入学习卡号密码" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('form')">完成</button>
			</view>
			<view v-if="index==1"  class="FormContainer">
				<view class="">
					选择套餐
				</view>
				<view class="ItemFocus">
					<text>学习有效期30天</text>
					<view>￥<text>30</text></view>
					
				</view>
				<button type="primary" @click="submit('form')">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				exam_config_list: [],
				tabList: ['学习卡激活', '微信购买'],
				index: 0,

				formData: {
					cardid: '',
					password: ""

				},
				rules: {
					// 对name字段进行必填验证
					cardid: {
						rules: [{
							required: true,
							errorMessage: '请输入学习卡号',
						}, ]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, ]
					}
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {},
		onShow() {},
		mounted() {},
		
		components: {},
		methods: {
			change(n) {
				this.index = n
			},
			submit(form) {
				if(!this.formData.cardid){
					uni.showToast({
						title:'请填写卡号',
						
					})
					return
				}
				if(!this.formData.password){
					uni.showToast({
						title:'请填写卡号密码',
						
					})
						return
				}
			 this.$myHttp.post({
			    url: this.$myHttp.urlMap.addOrder,
			    // needLogin: true,
				data:{
					method:"",
					pay_type:"card",
					card_sn:this.formData.cardid,
					card_password:this.formData.password,
					code:''
				}
				
			}).then(res=>{
				console.log(res)
			})
			
				
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.tabbar {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #e2e2e2;
		padding: 40rpx;
	}

	.Focus {
		color: #3c7bfc;
		position: relative;
	}

	.Focus::after {
		position: absolute;
		clear: both;
		content: '';
		width: 64rpx;
		height: 4rpx;
		background-color: #3c7bfc;
		left: 0;
		right: 0;
		bottom: -40rpx;
		margin: auto;

	}

	.FormContainer {
		padding: 40px;

		.input {
			height: 80rpx;
		}

		button {
			margin-top: 40rpx;
			background-color: #3c7bfc;
		}
	}
	.ItemFocus{
		display: flex;
		    justify-content: space-between;
		    padding: 20rpx;
		    border: 1px solid #3c7bfc;
		    border-radius: 8rpx;
	}
</style>
